<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令3</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <h1>{{name}}</h1>
    <ul>
        <p>对数组数据的穷尽</p>
        <li v-for="teamname in arr1">
            英超球队名称：{{teamname}}
        </li>

        <hr>
        <p>带索引对数组数据的穷尽</p>
        <li v-for="(team,index) in arr2">
            {{index+1}}  英超球队名称：{{team}}
        </li>

        <hr>
        <p>下面将展示很吊的数组无限增加环节</p>
        <input type="button" value="增加数组" @click="add">
        <input type="button" value="减少数组" @click="sub">

        <hr>
        <p>对象数组数据的穷尽，将整个对象显示出来</p>
        <h2 v-for="(item,index) in arr3">
            {{index+1}}  英超球队名称：{{item}}
        </h2>

        <hr>
        <p>对象数组数据的穷尽，通过点语法，将整个对象里的数据显示出来</p>
        <h2 v-for="(item,index) in arr3" v-bind:title = item.name>
            {{index+1}}  英超球队名称：{{item.name}}
        </h2>



    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            arr1:["利物浦","曼联","南安普顿","切尔西","曼城"],
            arr2:["纽卡斯尔","热刺","阿森纳","莱斯特城"],
            arr3:[
                {name:"利物浦11"},
                {name:"热刺11"},
                {name:"莱斯特城11"},
                {name:"切尔西11"},
            ]
        },
        methods: {
            add:function () {
                this.arr3.push({name:"我是新添加的内容"});
            },
            sub:function () {
                this.arr3.shift();
            }
        }
    });
</script>
</body>
</html>